<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单练习</title>
</head>
<body>
<!--form表单 action:提交到的地址，这里的#号占位符表示提交到本页的最上面-->
<form action="#">
    <!--input是表单的输入控件
    name:控件的名字，没有name属性的控件无法提交值
    placeholder:提示文本占位符，用于给用户显示输入提示
    value:默认存在，用来保护用户在控件中输入的值，也可以用于设置输入框的默认值
    readonly:只读，单值属性，用户无法修改，但控件的值可以提交
    disabled:禁用，单值属性，用户无法修改，并且控件整个被禁用掉了，值也无法提交-->
    姓名1:<input type="text" name="uname1" placeholder="请输入昵称"> <br>
    姓名2:<input type="text" name="uname2" value="kk"> <br>
    姓名3:<input type="text" name="uname3" value="kk" readonly> <br>
    姓名4:<input type="text" name="uname4" value="kk" disabled> <br>
    密码:<input type="password" name="upwd" maxlength="6"> <br>
    性别:<input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0" checked>女
    <br>
    爱好:<input type="checkbox" name="like" value="zf">做饭
        <input type="checkbox" name="like" value="dy" checked>看电影
        <input type="checkbox" name="like" value="xs" checked>看小说
        <input type="checkbox" name="like" value="yx">玩游戏
    <br>
    <!--h5新增的表单控件-->
    颜色:<input type="color" name="color"> <br>
    日期:<input type="date" name="date"> <br>
    文件:<input type="file" name="file"> <br>
    范围:<input type="range" name="range"> <br>
    <hr>
    请选择喜欢的城市:
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="zh">珠海</option>
        <option value="sy">三亚</option>
    </select>
    <br>
    留言板：
    <textarea name="content" style="resize: none;"></textarea>
    <br>
    <!--关联控件-->
    <!--点击关联文字就可以让复选框被选中-->
    <input type="checkbox" id="ok">
    <label for="ok">我同意以上协议</label>
    <br>
    <!--点击关联文字就可以让输入框获得输入焦点-->
    <label for="nickname">昵称</label>
    <input type="text" id="nickname" value="nm">
    <hr>
    <input type="submit" value="点我提交">
    <input type="reset" value="点我重置">
    <input type="button" value="点我注册">
</form>
</body>
</html>